<template>
    <div class="result-wrapper">
      <!-- 遍历歌曲数据集 -->
      <div class="song" v-for="(item,index) in songList" :key="'song'+index">
        <div class="name">
          <!-- 跳转播放音乐功能 -->
          <span class="iconfont icon-play" @click="toPlay(item)"></span>
          <!-- 跳转到评论页面 -->
          <a @click.prevent="toComment(item.id)">{{item.name}}</a>
          <!-- 没有mv显示的是0，就不显示 ；到mv页面-->
          <span class="iconfont icon-editmedia" v-if="item.mvid !==0" @click="toMv(item.mvid)"></span>
        </div>
        <div class="singer">{{item.artists | formatSinger}}</div>
        <div class="album">{{item.album.name}}</div>
        <div class="time">{{item.duration | fromatTime}}</div>
      </div>
    </div>
</template>

<script>
// 【封装后报错，需要把这里删除原因不清楚】
// import func from 'vue-editor-bridge';
// 引入songList 集合
import songListLocal from "../mockdatas/songList"
// 需要使用路由，这里使用导入router
import router from "../router/index.js"
export default {
  props:['keyword'],
  data(){
    return {
       // 音乐搜索关键词
       songList:[],
      //  跳转页面的id数据
    }
  },
  created(){
      this.getSongList();
  },
  methods:{
    // 根据关键词获取歌单信息
    async getSongList(){
      // console.log("this.$router.history.current.params.keyword:"+this.$router.history.current.params.keyword);
      // console.log("=================================")
      // console.log(this.$router)
      // console.log("=================================")

      // 把历史中的keyword赋值给keyword关键字，用作监听
      this.keyword = this.$router.history.current.params.keyword
      // 读取动态路由传递的参数
      if(this.$router.history.current.params.keyword === ""){
        alert("未输入关键字，请检查输入")
        return;
      }
      // axios发出默认请求
      await this.$axios.get('/search?keywords='+this.$router.history.current.params.keyword)
      .then(backData=>{
        // 正常访问情况下读取songs信息
        this.songList = backData.result.songs
      })
      .catch((err)=>{
          if(err){
            // 错误之后读取本地信息
            this.songList = songListLocal
            // console.log(this.songList)
          }
      })
      // 正常访问情况下读取songs信息
      // this.songList = res.result.songs
    },
    // 跳转到【播放音乐】界面
    toPlay(item){
      console.log(item.id)
      router.push("/player/" + item.id)
    },
    // 跳转到【mv】页面
    toMv(mvid){
      // console.log(mvid)
      router.push("/mv/"+mvid)
    },
    // 跳转到【评论】页面
    toComment(id){
      router.push("/comment/"+id)
    }
    
  },
  // 检测关键词改变这里等会换成路由守卫
  watch:{
    'keyword': function(){
      console.log("路由地址发生了变化，被监听了")
      this.getSongList()
    }
  },
   
  
  // 过滤器处理歌手和歌曲时间
  filters:{
    // 拼接歌手信息
    formatSinger(singers){
      let tmpStr = ""
      singers.forEach(item=>{
        tmpStr += item.name;
        tmpStr += " | " 
      })
      // 截取最后一个的竖线
      tmpStr = tmpStr.slice(0,-2)
      return tmpStr;
    },
    // 处理歌曲时间显示
    fromatTime(time){
      // 获取总共秒数
      const talSeconds = time /1000;
      // 获取分钟数
      const min = ~~(talSeconds / 60)
      let sec = ~~(talSeconds % 60)
      sec = sec>10? sec : "0"+sec
      return min + ":" + sec
    }
  }
}
</script>
    
<style>
    @import "@/assets/css/results.css";
</style>